html {
    width: 100vw;
    height: 100vh;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}


/* w:375px h:44px */

#header {
    display: flex;
    width: 10rem;
    height: 1.173333rem;
    background: orange;
    justify-content: space-between;
    align-items: center;
}


/* h:25px */

#header img:nth-of-type(1) {
    height: .666667rem;
    padding-left: .213333rem;
}


/* h:30px */

#header img:nth-of-type(2) {
    height: .8rem;
}


/* w:375px h:60px */

#search {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 10rem;
    height: 1.6rem;
}

#search input {
    border: 0;
}

#search>input:focus {
    outline: none
}


/* h:30px w:250px */

#search input:nth-of-type(1) {
    width: 6.666667rem;
    height: .8rem;
    border-radius: .3rem;
    background: gainsboro;
    padding-left: .4rem;
}


/* h:30px w:90px */

#search input:nth-of-type(2) {
    width: 2.4rem;
    height: .8rem;
    background: orange;
    border-radius: .4rem;
}

#main {
    flex: 1;
    overflow: auto;
}

#main .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

#main .menu a {
    width: 2.28rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: .266667rem;
    color: black;
}

#main .menu a>div>img {
    width: 1.48rem;
    padding-left: .133333rem;
    padding-bottom: .133333rem;
}


/* h36px */

#main .recommen .miniNav {
    width: 10rem;
    height: .96rem;
    background: orange;
    display: flex;
    align-self: center;
    justify-content: space-between;
}


/* 25px */

#main .recommen>.miniNav>a:nth-of-type(2) {
    position: relative;
    width: .8rem;
    height: .8rem;
    overflow: hidden;
    margin-right: .533333rem;
}

#main .recommen .miniNav a:nth-of-type(1) {
    color: white;
    font: .433333rem/.8rem "";
    margin-left: .533333rem;
}

#main .recommen .miniNav>a:nth-of-type(2) img {
    width: 4.8rem;
    position: absolute;
    top: -35px;
    left: 0;
}

#main .recommen>#moneyCtrl {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

#main .recommen>#moneyCtrl>a {
    height: 3.2rem;
    display: block;
    display: flex;
    border-top: .026667rem solid gray;
}

#main .recommen>#moneyCtrl>a .imgBox>img {
    width: 2.666667rem;
    height: 2.666667rem;
}

#main .recommen>#moneyCtrl>a .textBox {
    display: flex;
    flex-direction: column;
}

#main .recommen>#moneyCtrl>a .textBox>div {
    display: flex;
    flex-direction: row;
}

#main .recommen>#moneyCtrl>a .textBox>span {
    font: .4rem/.533333rem "";
    color: black;
    margin-bottom: .533333rem;
    margin-top: .2rem;
}

#main .recommen>#moneyCtrl>a .textBox>div {
    color: gray;
}

#main .recommen>#moneyCtrl>a .textBox>div>span:nth-of-type(1) {
    /* margin-right: .106667rem; */
    /* margin-top: .02rem; */
    /* padding: .08rem 0; */
    /* padding-right: .803333rem; */
    /* width: 1.066667rem; */
    margin-top: .133333rem;
    padding-right: .266667rem;
    margin-bottom: .133333rem;
    border-right: .026667rem solid gray;
}

#main .recommen>#moneyCtrl>a .textBox>div>span:nth-of-type(2) {
    margin: .133333rem 0;
}

#main .recommen>#moneyCtrl>a .textBox>div>span:nth-of-type(3) {
    padding-left: 1.2rem;
    margin: .133333rem 0;
}

#main .recommen #moneyCtrl>a .textBox>span>span:nth-of-type(2) {
    color: red;
}

#main #youhui {
    display: block;
    width: 10rem;
    text-align: center;
    background: whitesmoke;
    height: .8rem;
    font: .4rem/.8rem "";
    border: .026667rem solid grey;
}

#footer .footer-top>p {
    color: white;
    font: .433333rem/.8rem "";
    margin-left: .533333rem;
}

#footer .footer-top {
    display: flex;
    background: orange;
    justify-content: space-between;
}

#footer .footer-top>a {
    position: relative;
    width: .8rem;
    height: .8rem;
    overflow: hidden;
    margin-right: .533333rem;
}

#footer .footer-top>a>img {
    width: 4.8rem;
    position: absolute;
    top: -35px;
    left: 0;
}

#footer .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: whitesmoke;
    padding-top: .333333rem;
}

#footer .footer-bottom>div {
    width: 10rem;
    display: flex;
}

#footer .footer-bottom>div>a {
    border: .026667rem solid #c4c4c4;
    display: block;
    text-align: center;
    font: .32rem/.8rem "";
    color: black;
}

#footer .footer-bottom>div>a:nth-of-type(1) {
    width: 30%;
    border-right: 0;
}

#footer .footer-bottom>div>a:nth-of-type(2) {
    width: 30%;
    border-right: 0;
}

#footer .footer-bottom>div>a:nth-of-type(3) {
    width: 40%;
}

#footer .footer-bottom>p:nth-of-type(1) {
    padding-top: .24rem;
    color: #666;
}

#footer .footer-bottom>p:nth-of-type(1)>span:nth-of-type(1) {
    color: red;
}

#footer .footer-bottom>p:nth-of-type(2) {
    padding-top: .24rem;
    color: #666;
}